<template>
  <div class="forgot-password-page">
    <div class="forgot-password-container">
      <div class="forgot-password-box">
        <div class="forgot-password-header">
          <img src="@/assets/logo.png" alt="Logo" class="logo">
          <h2>找回密码</h2>
        </div>
        
        <el-steps :active="currentStep" finish-status="success" class="steps">
          <el-step title="验证身份" description="验证手机号" />
          <el-step title="重置密码" description="设置新密码" />
          <el-step title="完成" description="密码重置成功" />
        </el-steps>

        <!-- 步骤1：验证身份 -->
        <el-form 
          v-if="currentStep === 0"
          ref="verifyForm"
          :model="verifyForm"
          :rules="verifyRules"
          class="forgot-password-form"
        >
          <el-form-item prop="phone">
            <el-input
              v-model="verifyForm.phone"
              placeholder="请输入手机号"
              prefix-icon="Phone"
            >
              <template #append>
                <el-button 
                  :disabled="!!countdown || !isPhoneValid" 
                  @click="handleSendCode"
                >
                  {{ countdown ? `${countdown}s后重新发送` : '获取验证码' }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="code">
            <el-input
              v-model="verifyForm.code"
              placeholder="请输入验证码"
              prefix-icon="Key"
            />
          </el-form-item>

          <el-button 
            type="primary" 
            class="next-button"
            :loading="loading"
            @click="handleVerifyIdentity"
          >
            下一步
          </el-button>
        </el-form>

        <!-- 步骤2：重置密码 -->
        <el-form 
          v-if="currentStep === 1"
          ref="resetForm"
          :model="resetForm"
          :rules="resetRules"
          class="forgot-password-form"
        >
          <el-form-item prop="password">
            <el-input
              v-model="resetForm.password"
              type="password"
              placeholder="请输入新密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <el-form-item prop="confirmPassword">
            <el-input
              v-model="resetForm.confirmPassword"
              type="password"
              placeholder="请确认新密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <el-button 
            type="primary" 
            class="next-button"
            :loading="loading"
            @click="handleResetPassword"
          >
            确认重置
          </el-button>
        </el-form>

        <!-- 步骤3：完成 -->
        <div v-if="currentStep === 2" class="success-step">
          <el-icon class="success-icon" :size="64"><CircleCheckFilled /></el-icon>
          <h3>密码重置成功！</h3>
          <p>请使用新密码登录您的账号</p>
          <el-button type="primary" @click="handleGoLogin">
            立即登录
          </el-button>
        </div>

        <div class="other-options">
          <el-link type="primary" :underline="false" @click="handleGoLogin">
            返回登录
          </el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Phone, Key, Lock, CircleCheckFilled } from '@element-plus/icons-vue';

export default defineComponent({
  name: 'ForgotPassword',
  components: {
    Phone,
    Key,
    Lock,
    CircleCheckFilled
  },
  setup() {
    const router = useRouter();
    const currentStep = ref(0);
    const loading = ref(false);
    const countdown = ref(0);

    const verifyForm = reactive({
      phone: '',
      code: ''
    });

    const resetForm = reactive({
      password: '',
      confirmPassword: ''
    });

    const verifyRules = {
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
      ],
      code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { len: 6, message: '验证码长度应为6位', trigger: 'blur' }
      ]
    };

    const resetRules = {
      password: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== resetForm.password) {
              callback(new Error('两次输入的密码不一致'));
            } else {
              callback();
            }
          },
          trigger: 'blur'
        }
      ]
    };

    const isPhoneValid = computed(() => {
      return /^1[3-9]\d{9}$/.test(verifyForm.phone);
    });

    const startCountdown = () => {
      countdown.value = 60;
      const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    };

    const handleSendCode = async () => {
      try {
        // 模拟发送验证码
        await new Promise(resolve => setTimeout(resolve, 1000));
        ElMessage.success('验证码已发送');
        startCountdown();
      } catch (error) {
        ElMessage.error('验证码发送失败，请重试');
      }
    };

    const handleVerifyIdentity = async () => {
      loading.value = true;
      try {
        // 模拟验证身份
        await new Promise(resolve => setTimeout(resolve, 1000));
        currentStep.value = 1;
      } catch (error) {
        ElMessage.error('验证失败，请重试');
      } finally {
        loading.value = false;
      }
    };

    const handleResetPassword = async () => {
      loading.value = true;
      try {
        // 模拟重置密码
        await new Promise(resolve => setTimeout(resolve, 1000));
        currentStep.value = 2;
      } catch (error) {
        ElMessage.error('重置失败，请重试');
      } finally {
        loading.value = false;
      }
    };

    const handleGoLogin = () => {
      router.push('/login');
    };

    return {
      currentStep,
      verifyForm,
      resetForm,
      verifyRules,
      resetRules,
      loading,
      countdown,
      isPhoneValid,
      handleSendCode,
      handleVerifyIdentity,
      handleResetPassword,
      handleGoLogin
    };
  }
});
</script>

<style scoped lang="scss">
.forgot-password-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $background-color-base;
}

.forgot-password-container {
  width: 100%;
  max-width: 480px;
  padding: $spacing-base;
}

.forgot-password-box {
  background-color: $background-color-white;
  padding: $spacing-extra-large;
  border-radius: $border-radius-large;
  box-shadow: $box-shadow-base;
}

.forgot-password-header {
  text-align: center;
  margin-bottom: $spacing-extra-large;

  .logo {
    width: 120px;
    margin-bottom: $spacing-base;
  }

  h2 {
    font-size: $font-size-extra-large;
    color: $text-primary;
    margin: 0;
  }
}

.steps {
  margin-bottom: $spacing-extra-large;
}

.forgot-password-form {
  .next-button {
    width: 100%;
    margin-top: $spacing-base;
  }
}

.success-step {
  text-align: center;
  padding: $spacing-extra-large 0;

  .success-icon {
    color: $success-color;
    margin-bottom: $spacing-base;
  }

  h3 {
    font-size: $font-size-large;
    color: $text-primary;
    margin-bottom: $spacing-small;
  }

  p {
    color: $text-regular;
    margin-bottom: $spacing-large;
  }
}

.other-options {
  margin-top: $spacing-base;
  text-align: center;
}

@media screen and (max-width: 480px) {
  .forgot-password-container {
    padding: $spacing-small;
  }

  .forgot-password-box {
    padding: $spacing-large;
  }
}
</style> 